<template>
    <div>
        <div v-if="myloading" class="loading">
            <van-loading size="100px" color="#ec344e" />
        </div>
        <div class="video" v-else>
            <div class="video_part" v-for="(item,t) in list" :key="t">
                <!-- 嵌套多层时加个判断 -->
                <div class="video_header">
                    <div class="header_photo">
                        <img :src="item.note?.author?.p" alt="">
                    </div>
                    <div class="header_text">
                        <div class="user_name">{{item.note?.author?.n}}</div>
                        <div class="level">Lv.{{item.note?.author?.lvl}}</div>
                    </div>
                    <div class="header_right">...</div>
                </div>
                <video :src="item.note?.video_url" controls="controls" loop="loop" muted="muted" class="myvideo"></video>
                <div class="video_final">
                    <div class="final_final_header">
                        <div class="final_photos">
                            <div class="final_photo" v-for="(p,t) in item.note?.collect_users" :key="t">
                                <img :src="p.p" alt="">
                            </div>
                        </div>
                        <div class="final_text">{{ item.note?.like_count }}人收藏</div>
                        <div class="final_love"><img src="../../assets/img/collect_on.png" alt=""></div>
                    </div>
                    <div class="final_final_bottom">
                        <div class="text1">{{ item.note?.title }}</div>
                        <div>{{ item.note?.title }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
    // 做网络请求，导入api
    import { video } from '../../api/index'
    
    export default {
        data(){
            return {
                datas: [],
                list:[],
                myloading: false
            }
        },
    
        // 初始化
       async created(){
            this.myloading = true;
            await video()
            .then(
                content=> {
                    console.log('--->',content.result);
                    let banners = content.result;
                    this.datas = banners;
                    this.list = banners.list;
                }
            )
            // 请求之后
            setTimeout(() => {
                // 隐藏loading
                this.myloading = false;
            }, 500);
            // console.log(this.datas)
            // console.log(this.list)
        },
        methods: {
            
        },
    }
    var au = document.getElementsByClassName("myvideo");
    console.log("au:",au);
    for(var i=0;i < au.length;i++){
        console.log(au[i]);
        au[i].addEventListener('play', function(e) {
            console.log('提示该视频正在播放中')
            console.log(e)
        })
    }
</script>

<style lang="less">
    .video{
        width: 100%;
        margin-bottom: 80px;
        .video_part{
            width: 100%;
            .video_header{
                width: 100%;
                display: flex;
                margin-top: 10px;
                padding: 5px 10px 20px 10px;
                position: relative;
                .header_photo{
                    img{
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                    }
                }
                .header_text{
                    display: flex;
                    align-items: center;
                    .user_name{
                        margin-left: 10px;
                        font-size: 14px;
                        font-weight: 700;
                    }
                    .level{
                        margin-left: 10px;
                        font-size: 12px;
                        color: #cca645
                    }
                }
                .header_right{
                    position: absolute;
                    right: 10px;
                }
            }
            video{
                width: 100%;
                height: 200px;
            }
            .video_final{
                .final_final_header{
                    padding: 10px 10px 0 10px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    .final_photos{
                        display: flex;
                        .final_photo{
                            img{
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                            }
                        }
                    }
                    .final_text{
                        font-size: 12px;
                        margin-left: 10px;
                    }
                    .final_love{
                        position: absolute;
                        right: 10px;
                        img{
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
                .final_final_bottom{
                    padding: 0 10px;
                    font-size: 12px;
                    .text1{
                        color: #5b9ca4;
                    }
                }
            }
        }
    }
    .loading{
        width: 100%;
        margin-top: 100px;
        padding-left: 35%;
    }
</style>